<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			a {
				text-decoration: none;
			}
			
			.container {
				position: relative;
				width: 600px;
				height: 400px;
				margin: 100px auto 0 auto;
				box-shadow: 0 0 5px rgb(180, 182, 180);
				overflow: hidden;
			}
			
			.container .wrap {
				position: absolute;
				width: 4200px;
				height: 400px;
				z-index: 1;
			}
			
			.container .wrap img {
				float: left;
				width: 600px;
				height: 400px;
			}
			
			.container .buttons {
				position: absolute;
				right: 5px;
				bottom: 30px;
				width: 120px;
				height: 10px;
				z-index: 2;
			}
			
			.container .buttons span {
				margin-left: 5px;
				display: inline-block;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background-color: rgb(211, 212, 211);
				text-align: center;
				color: white;
				cursor: pointer;
			}
			
			.container .buttons span.on {
				background-color: rgb(151, 150, 150);
			}
			
			.container .arrow {
				position: absolute;
				top: 40%;
				color: rgb(179, 182, 179);
				padding: 0px 15px;
				border-radius: 50%;
				font-size: 50px;
				z-index: 2;
				display: none;
			}
			
			.container .arrow_left {
				left: 10px;
			}
			
			.container .arrow_right {
				right: 10px;
			}
			
			.container:hover .arrow {
				display: block;
			}
			
			.container .arrow:hover {
				background-color: rgba(0, 0, 0, 0.2);
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="wrap">
				<img src="./image/img_road.jpg" alt="5">
				<img src="./image/img_fjords.jpg" alt="1">
				<img src="./image/img_forest.jpg" alt="2">
				<img src="./image/img_lights.jpg" alt="3">
				<img src="./image/img_mountains.jpg" alt="4">
				<img src="./image/img_road.jpg" alt="5">
				<img src="./image/img_fjords.jpg" alt="1">
			</div>
			<div class="buttons">
				<span class="on"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<a href="javascript:void (0);" rel="external nofollow" class="arrow arrow_left">
				<</a>
					<a href="javascript:void (0);" rel="external nofollow" class="arrow arrow_right">></a>
		</div>
		<script type="text/javascript">
			// 下一页
			function next_pic(wrap) {
				index++;
				if(index > 4) {
					index = 0;
				}
				showCurrentDot(wrap);
				var newLeft;
				if(wrap.style.left === "-3600px") {
					newLeft = -1200;
				} else {
					newLeft = parseInt(wrap.style.left) - 600;
				}
				wrap.style.left = newLeft + "px";
			}
			// 上一页
			function prev_pic(wrap) {
				index--;
				if(index < 0) {
					index = 4;
				}
				showCurrentDot(wrap);
				var newLeft;
				if(wrap.style.left === "0px") {
					newLeft = -2400;
				} else {
					newLeft = parseInt(wrap.style.left) + 600;
				}
				wrap.style.left = newLeft + "px";
			}
			// 定时器 --- 自动播放
			let timer = null;

			function autoPlay(wrap) {
				timer = setInterval(function() {
					next_pic(wrap);
				}, 2000);
			}

			// 圆点导航
			let index = 0;
			let dots = document.getElementsByTagName("span");
			// 显示当前是第几张图片
			function showCurrentDot(wrap) {
				for(var i = 0, len = dots.length; i < len; i++) {
					dots[i].className = "";
				}
				dots[index].className = "on";
			}
			//最开始和最后的照片修整
			for(var i = 0, len = dots.length; i < len; i++) {
				(function(i) {
					let wrap = document.querySelector(".wrap");
					dots[i].onclick = function() {
						var dis = index - i;
						if(index == 4 && parseInt(wrap.style.left) !== -3000) {
							dis = dis - 5;
						}
						//和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
						if(index == 0 && parseInt(wrap.style.left) !== -600) {
							dis = 5 + dis;
						}
						wrap.style.left = (parseInt(wrap.style.left) + dis * 600) + "px";
						index = i;
						showCurrentDot(wrap);

					}
				})(i);
			}

			function init() {
				var wrap = document.querySelector(".wrap");
				var next = document.querySelector(".arrow_right");
				var prev = document.querySelector(".arrow_left");
				// 当鼠标点击上下箭头
				next.onclick = function() {
					next_pic(wrap);
				}
				prev.onclick = function() {
					prev_pic(wrap);
				}
				//启动定时器
				autoPlay(wrap);
				// 鼠标滑过 取消自动播放
				var container = document.querySelector(".container");
				container.onmouseenter = function() {
					clearInterval(timer);
				}
				container.onmouseleave = function() {
					autoPlay(wrap);
				}
			}
			window.addEventListener('load', init, false);
			-- -- -- -- -- -- -- -- -- -- -
			作者： 芥末酱哈
			来源： CSDN
			原文： https: //blog.csdn.net/qq_29545573/article/details/78247315 
				版权声明： 本文为博主原创文章， 转载请附上博文链接！
		</script>

	</body>

</html>